<template>
	<uni-popup ref="popup" type="bottom" @change="change">
		<view class="popup-content flex flex-column">
			<view class="flex justify-end">
				<image src="/static/images/common/icon-close.png" class="close_btn" @tap="close"></image>
			</view>
			<view class="mt-30">
				<button class="pt-10 pb-10 border-radius-10 bg-yellow-light font-size-28" type="primary" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					点击登录
				</button>
				<view class="prd mt-100 flex justify-center align-center">
					<view class="prompt" v-if="showPrompt">请阅读并且勾选用户协议</view>
					<uni-icons
						custom-prefix="iconfont"
						:type="isSelected ? 'icon-yuanxingxuanzhongfill' : 'icon-yuanxingweixuanzhong'"
						:color="isSelected ? '#EDAC2F' : '#999'"
						size="18"
						@click="onSel"
					/>
					<text class="mr-10 ml-10">我已阅读并同意</text>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=user" hover-class="none">用户服务协议、</navigator>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=privacy" hover-class="none">隐私政策</navigator>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { mapMutations } from 'vuex';

export default {
	name: 'LoginPopup',
	components: {
		uniPopup
	},
	props: {},
	data() {
		return {
			isSelected: false,
			showPrompt: false
		};
	},
	methods: {
		...mapMutations(['SET_USERINFO', 'SET_ISLOGIN']),
		onSel() {
			this.isSelected = !this.isSelected;
			this.showPrompt = false;
		},
		decryptPhoneNumber(val) {
			// console.log(val)
		},
		onLogin() {
			let _this = this;
			if (!this.isSelected) {
				this.showPrompt = true;
			} else {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function (loginRes) {
						_this.$http.OnLogin({ code: loginRes.code }).then((res) => {
							_this.SET_USERINFO(res.data);
							_this.close();
						});
					}
				});
			}
		},
		open() {
			this.$refs['popup'].open();
		},
		close() {
			this.$refs['popup'].close();
		},
		change({ show }) {
			this.$emit('change', show);
		},
		getUserInfo(e) {
			//请配置AppID，否则获取失败
			if (e.target.errMsg !== 'getUserInfo:ok') {
				uni.showModal({
					title: '提示',
					content: '您已取消了授权，请重新授权登录',
					showCancel: false
				});
				return;
			}
			this.SET_USERINFO(e.target.userInfo);
			this.SET_ISLOGIN(true);
			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	// height: 50vh;
	padding: 30rpx 40rpx 50rpx 40rpx;
	border-bottom: 1px #dedede solid;
}

.close_btn {
	width: 40rpx;
	height: 40rpx;
}
.prd {
	position: relative;
	.prompt {
		background: #333;
		color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		position: absolute;
		left: 0;
		top: -86rpx;
	}
}
</style>
